<template>
  <div>
    <input type="checkbox" id="toggle">
    <p id="display" style="word-wrap: break-word ; font-size: 40px"></p>
  </div>
</template>

<script>
  import {Observable, fromEvent, interval,concat,NEVER} from 'rxjs'
  import {takeUntil, flatMap, map, filter,takeWhile,concatAll,withLatestFrom} from 'rxjs/operators'

  export default {
    name: "toggle-stream.vue",
    mounted() {
      const display = document.getElementById('display')
      const toggle = document.getElementById('toggle')
      const check$ = fromEvent(toggle, 'change')
      const interval$ = interval(1)
      //source.subscribe((x)=>display.innerText += 'X')

      //更简单的实现
      let listener = (x, y) =>{
        console.log('已订阅.',x,y)
        display.innerText += '.'
      };

      // interval$.pipe(
      //   takeUntil(check$.pipe(map(e => e.target.checked))), // 直到.发生
      // ).subscribe(listener)

      check$.pipe(
        map(e => e.target.checked), //普通map,其他的map都有扁平化操作,比如 flatMap,concatMap,mergeMap,switchMap
        filter(x => x),

        //withLatestFrom(interval$), //纯操作符方法,主导方法,不管 被动流有多快 ,主导都是 with 被动的快照

        flatMap((x) => {  //扁平化下游流
          console.log('flatMap',x)
          return interval$.pipe(takeUntil(check$)) //休止,直到流出现时开始取数
        })


      ).subscribe(listener)
      // interval$.subscribe((x)=>display.innerText += '.')
    }
  }
  /**
   concatMap = map + concatAll
   mergeMap = map + mergeAll
   switchMap = map + switchAll
   */
</script>

<style scoped>

</style>
